import React, { FC, useState, useEffect } from "react";
import { useRecoilValue } from "recoil";
import { Upload, message, Button } from "antd";
import { UploadOutlined } from '@ant-design/icons';
import { UploadChangeParam } from "antd/lib/upload";
import { UploadFile } from "antd/lib/upload/interface";
import JsFileDownloader from 'js-file-downloader';

const uploadFile: FC<{}> = () => {
  useEffect(() => {}, []);
  const props = {
    name: "files",
    action: "http://127.0.0.1:3002/save",
    headers: {
      authorization: "authorization-text",
    },
    onChange(info:UploadChangeParam<UploadFile<any>>) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };
  const fileDown = () => {
    new JsFileDownloader({ 
      url: 'http://localhost:3002/fileload/upload_30a5db2b22671532ed525d45153338ff.png'
    })
  }

  return (
    <>
      <div>
        <Upload {...props}>
          <Button icon={<UploadOutlined />}>Click to Upload</Button>
        </Upload>
          <Button onClick={fileDown} icon={<UploadOutlined />}>Click to download</Button>
      </div>
    </>
  );
};

export default React.memo(uploadFile);
